<template>
    <div class="home" style="padding: 20px">
        <el-table :data="tableData.filter(
        (data) =>
          !search || data.username.toLowerCase().includes(search.toLowerCase())
      )" border stripe style="width: 70vw">
            <el-table-column prop="orderNo" label="订单号"  />
            <el-table-column prop="name" sortable label="商品名" />
            <el-table-column prop="amount"  label="数量" />
            <el-table-column prop="totalPrice"  label="费用" />
            <el-table-column prop="payTime" label="支付时间" />
            <el-table-column prop="state" label="订单状态" >
                <template #default="scope">
                    <span v-if="scope.row.state === 0" style="color: indianred">未支付</span>
                    <span v-if="scope.row.state === 1" style="color: green">已支付</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" >
                <template #default="scope">
                    <el-button type="primary" size="mini" :disabled="scope.row.state === 1" @click="buyOrder(scope.row)">购买</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div style="margin: 10px 0">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    v-model:currentPage="currentPage"
                    :page-sizes="[5, 10, 15]"
                    :page-size="pageSize"
                    layout="sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>

        </div>
    </div>

</template>

<script>
    // @ is an alias to /src

    import { ArrowDown,DocumentAdd,setting } from '@element-plus/icons'
    import { ElMessage } from 'element-plus'
    import request from "../utils/request";

    export default {
        name: 'Cart',
        components: {
            ArrowDown,DocumentAdd,setting
        },
        data(){
            return{
                form:{},
                search:'',
                currentPage:1,
                total:0,
                pageSize:10,
                dialogVisible:false,
                tableData:[]
            }
        },
        created() {
            let userStr = sessionStorage.getItem("user") || "{}"
            this.user = JSON.parse(userStr)
            // 请求服务端，确认当前登录用户的 合法信息
            // request.get("/user/" + this.user.id).then(res => {
            //     if (res.code === '0') {
            //         this.user = res.data
            //     }
            // })
            this.search=this.user.username
            this.load()
        },
        methods:
            {
                load() {
                    request.get("/orderlist", {
                        params: {
                            pageNum: this.currentPage,
                            pageSize: this.pageSize,
                            search: this.search
                        }
                    }).then(res => {
                        console.log(res)
                        this.tableData = res.data.records
                        this.total = res.data.total
                        // this.search =res.data.username
                    })
                },
                buyOrder(row) {
                    this.form = JSON.parse(JSON.stringify(row))
                    this.form.state=1
                    request.put("/orderlist", this.form).then(res => {
                        if (res.code === '0') {
                            this.$message({
                                type: "success",
                                message: "购买成功"
                            })
                        } else {
                            this.$message({
                                type: "error",
                                message: res.msg
                            })
                        }
                        this.load()
                     })
                    let userStr = sessionStorage.getItem("user") || "{}"
                    this.user = JSON.parse(userStr)
                    console.log(this.form.name,this.user.email)
                    request.get("/email", {
                        params: {
                            name: this.form.name,
                            receiver: this.user.email,
                        }
                    }).then(res => {
                        console.log(res)
                    })
                },
                handleEdit(row){
                    this.form = JSON.parse(JSON.stringify(row))
                    this.dialogVisible = true
                    this.$nextTick(() => {
                        if (this.$refs['upload']) {
                            this.$refs['upload'].clearFiles()  // 清除历史文件列表
                        }
                    })
                },
                handleSizeChange(pageSize){
                    this.pageSize = pageSize
                    this.load()
                },

                handleCurrentChange(pageNum){
                    this.pageNum = pageNum
                    this.load()
                },
            }

    }
</script>
